<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebRTC PeerConnection</title>
  <link href="css/main.css" rel="stylesheet" />
</head>
<body>
  <div>
    <div>
      <!--
        开始采集数据
      -->
      <button id="start">Start</button>
      <!--
        创建RTCPeerConnectionz`
        当两个PeerConnection创建完成之后呢, 会做协商处理
        协商处理完成之后, 进行双方的candidate采集
        采集完之后进行交换, 形成candidate pair,
        再进行排序, 再进行连接性检测, 最终找到最好的那条链路
        之后呢 就将local video展示的那个数据呢 通过PeerConnection传输到另一端
        另一端收到数据之后, 会触发 onAddStream 或则是 onTrack, 再在里面将它设置到remote video里去
        这样远端的video就展示出来了
      -->
      <button id="call" disabled>Call</button>
      <button id="hangup" disabled>HangUp</button>
    </div>

    <div id="preview">
      <div >
        <h2>Local:</h2>
        <video id="localvideo" autoplay playsinline></video>
        <h2>Local SDP:</h2>
        <textarea id="offer"></textarea>
      </div>
      <div>
        <h2>Remote:</h2>
        <video id="remotevideo" autoplay playsinline></video>
        <h2>Remote SDP:</h2>
        <textarea id="answer"></textarea>
      </div>
    </div>
  </div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
